<!-- file users -->
<script> 
	
	$(function(){
		/* REMOVE DUPLICATE ID */
		var ids = [];
		$('*').each(function() {
			if (this.id && this.id !== '') {
				if (ids[this.id]) {
					$(this).remove();
				} else {
					ids[this.id] = this
				}
			}
		});
		$.fn.serializeObject = function()
		{
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
			   if (o[this.name]) {
				   if (!o[this.name].push) {
					   o[this.name] = [o[this.name]];
				   }
				   o[this.name].push(this.value || '');
			   } else {
				   o[this.name] = this.value || '';
			   }
		   });
		   return o;
		};
		
        function format(state) {
			tambahan = "";
			if (typeof $(state.element[0]).attr("alt") != "undefined")
				tambahan = $(state.element[0]).attr("alt");
            return state.text+tambahan ; 
        }
		$.fn.getCombobox = function(data, key, label, desc){
			var field = $(this);
			field.html("<option></option>");
			$.ajax({
				url : "c_public_function",
				data : data,
				type : 'POST', dataType : 'json'
			}).done(function(response){
				field.html("<option></option>");
				for(i=0;i<response.length;i++){
					var option = "<option value='"+response[i][key]+"' ";
					if (desc != "")
						option += " alt='<div class=desc>"+response[i][desc]+"</div>'";
						
					option += " >"+response[i][label]+"</option>";
					field.append(option);
				}
				
				field.select2({
					placeholder: "-",
					allowClear: true,
					formatResult: format,
					formatSelection: format,
					escapeMarkup: function (m) {
						return m;
					}
				});
			});
		}
		/* declarisasi */
		
		task_users = $("#task_users");
		grid_users = $("#grid-users");
		pgrid_users = $("#pgrid-users");
		btnadd_users = $("#btn-add-users");
		btnedit_users = $("#btn-edit-users");
		btndelete_users = $("#btn-delete-users");
		btncancel_users =  $("#btn-cancel-users");
		btnsave_users = $("#btn-save-users");
		form_users = $("#form-users");
		
		field_user_id = $("#user_id");
		field_user_name = $("#user_name");
		field_user_password = $("#user_password");
		field_user_repeat = $("#user_repeat");
		s_groups_id = $("#s_groups_id");
		m_staff_id = $("#m_staff_id");
		
		/* method started */
			
		/* make component */
		m_staff_id.getCombobox({ task : "staffldap"},"uid","cn","");
		grid_users.unugrid({
			url: 'c_users',
			data : {task : 'LIST' },
			column :[ 
				{ label: 'User Name'  ,index: 'user_name' },
				{ label: 'Group'  ,index: 'groups_name' },
				{ label: ''  ,index: 'user_id',type: 'action' }
			],
			deleteClick : function(id,dataRow, c ){
				if (id != null){
					confr = confirm("Apa Anda yakin menghapus data ini?");
					if (confr){
						var data = $(this).data();
						$.ajax({
							type: 'POST',
							url: 'c_users',
							data: {user_id: id, task : 'DELETE'},
							success: function(response){
								if(response==1){
									grid_users.unugrid('refresh');
								}
							}
						});
					}
				}
			},
			editClick : function(id,dataRow, c ){
				if (id != null){
					task_users.val("UPDATE");
					field_user_id.val(dataRow.user_id);
					field_user_name.val(dataRow.user_name);
					s_groups_id.val(dataRow.s_groups_id);
					m_staff_id.select2("val",dataRow.m_staff_id);
					form_users.parent().parent(".portlet").show();
				}
			}
		});
		
		/* event */
		
		btnadd_users.click(function(){
			task_users.val("INSERT");
			form_users.parent().parent(".portlet").show();
		});
		
		btncancel_users.click(function(){
			form_users.parent().parent(".portlet").hide();
			m_staff_id.val('');
			m_staff_id.change();
		});
		
		btnsave_users.click(function(){
			if (field_user_repeat.val() !=  field_user_password.val()){
				alert("Password tidak cocok!");
			}else{
				data = form_users.serializeObject();
				$.ajax({
					url : "c_users",
					data : data,
					type : 'POST'
				}).done(function(response){
					grid_users.unugrid('refresh');
					btncancel_users.click();
				});
			}
		});
		
		m_staff_id.change(function(){
				field_user_name.val($(this).val());
		});
	});
</script>
	<div class="portlet box blue" hidden=hidden tabindex="-1" id="portlet-form-users">
	   <div class="portlet-title">
		  <div class="caption"><i class="icon-reorder"></i>User Management</div>
		  <div class="tools">
			 <a href="javascript:;" class="collapse"></a>
		  </div>
	   </div>

		<div class="portlet-body form">
		<!-- BEGIN FORM-->
		<form action="#" id="form-users" class="horizontal-form" onSubmit="javascript:return false;">

		<input type="hidden" value="INSERT" name="task" id="task_users">
		<input id="users_id" name="users_id" hidden=hidden />
		<input id="task_id" name="task_id" hidden=hidden  />

			 <div class="form-body">
				<h3 class="form-section">Info User</h3>
						<input type="hidden" value="INSERT" name="task" id="task_users">
						<input type="hidden"  id="user_id" name="user_id" />
				<div class="row"> 
					
				   <div class="col-md-6">
					  <div class="form-group">
						 <label class="control-label">Username:</label>
						<input id="user_name" name="user_name" class="form-control"  />
					  </div>
				   </div>
				   <div class="col-md-6">
					  <div class="form-group">
						 <label class="control-label">Group:</label>
						<?php echo form_dropdown("s_groups_id",$s_groups,"","id=s_groups_id class='form-control'"); ?>
					  </div>
				   </div>
				</div>
				<h3 class="form-section">Change Password</h3>
				<div class="row">
				   <div class="col-md-6">
					  <div class="form-group">
						 <label class="control-label">password:</label>
						 <input  class="form-control"id="user_password" type="password" name="user_password" />
					  </div>
				   </div>
				   <div class="col-md-6">
					  <div class="form-group">
						 <label class="control-label">repeat:</label>
						 <input class="form-control" id="user_repeat" type="password" name="user_repeat" />
					  </div>
				   </div>
				</div>
		
			 </div>
			 <div class="form-actions right">
				<button type="reset" id="btn-cancel-users" class="btn default">Cancel</button>
				<button type="submit" id="btn-save-users" class="btn blue"><i class="icon-ok"></i> Save</button>
			 </div>
		  </form>
		  <!-- END FORM--> 
	   </div>
	</div>
    
	 <div class="row">
		<div class="col-md-12">
		   <!-- BEGIN SAMPLE TABLE PORTLET-->
		   <div class="portlet box yellow">
			  <div class="portlet-title">
				 <div class="caption"><i class="icon-cogs"></i>User Management</div>
				 <div class="tools">
					<a href="javascript:;" class="collapse"></a>
				 </div>
			  </div>
			  <div class="portlet-body flip-scroll">
			  
			<button id="btn-add-users" class="btn btn-primary">Add</button>
			<p>&nbsp;</p>
			
			  <div id="grid-users" class="table-responsive"></div>
				</div>
			 </div>
		</div>
	</div>
